<!--
 * @Author: wangshuguang
 * @Date: 2022-02-17 16:29:20
 * @LastEditTime: 2022-03-24 10:19:32
 * @LastEditors: wangshuguang
 * @Description: 文件描述...
-->
<template>
  <div class="infoConfig">
    <el-form ref="form" :model="form" label-width="100px" :rules="rules">
      <el-form-item label="支付金额" prop="amount">
        <el-input v-model="amount" :disabled="step == 2" type="number" placeholder="支付金额请输入" size="small" class="width100" :min="1" :maxlength="8" />
        <div v-if="discountInfo.balance" class="flex-c-sb">
          <span>享受折扣：<span class="money">{{ discountInfo.discount }}折</span></span>
          <span>可获得流量余额：<span class="money">{{ discountInfo.balance }}</span></span>
        </div>
      </el-form-item>
      <el-form-item label="支付方式">
        对公打款
        <div class="tipColor">
          *请准确填写支付金额，务必使用签约时的公户进行打款
        </div>
      </el-form-item>
      <el-card class="mg-b-20">
        <div class="leftLine">
          收款公户信息
          <el-button class="mg-l-20" size="small" type="primary" @click="handleCopyClipboard($event)">一键复制</el-button>
        </div>
        <el-form-item label="银行">{{ publicAcount.bankName }}</el-form-item>
        <el-form-item label="支行">{{ publicAcount.branchBankName }}</el-form-item>
        <el-form-item label="卡号">{{ publicAcount.bankCardNo }}</el-form-item>
        <el-form-item label="公司名称">{{ publicAcount.bankCardName }}</el-form-item>
      </el-card>
      <el-card v-show="step == 2" class="mg-b-20">
        <div class="leftLine">
          打款凭证（{{ fileList.length }}/3）
        </div>
        <div>
          <el-upload
            :action="uploadImgApi"
            :show-file-list="true"
            :headers="{ 'X-SERVICER-TOKEN': $store.state.user.token }"
            :before-upload="uploadImgBefore"
            :on-progress="uploadImgProgress"
            :on-error="uploadImgError"
            :on-success="uploadImgSuccess"
            :on-remove="handleRemove"
            :file-list="fileList"
            list-type="picture-card"
            class="upload-box"
          >
            <!-- <el-image v-for="img of fileList" :key="img" :src="img" class="upload-img" fit="contain" /> -->
            <i v-show="fileList.length < 3" class="el-icon-plus" />
          </el-upload>
        </div>
      </el-card>
      <div class="btnList textCenter">
        <el-button size="small" @click="$emit('close')">取消</el-button>
        <el-button v-if="step == 1" type="primary" size="small" @click="payMoney">我已打款</el-button>
        <el-button v-else type="primary" size="small" @click="submit">提交</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { tenGetTenantDiscount, tenGetCollectionPublicInfo, commitRecharge } from '@/api/sp/flow'
import { uploadImgApi } from '@/api/upload'
import { mapGetters } from 'vuex'
import clip from '@/utils/clipboard'
export default {
  props: {
    infoConfig: {}
  },
  data() {
    return {
      form: {},
      // 1 未打款 2 已打款待提交
      step: 1,
      publicAcount: {},
      uploadImgApi: uploadImgApi,
      orgId: '',
      amount: '',
      discountInfo: {},
      fileList: [],
      rules: {
        amount: [
          { validator: this.amountValid, required: true, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['fileBaseUrl', 'userInfo', 'spInfo']),
    baseData() { return this.infoConfig.data },
    pageType() { return this.infoConfig.type }
  },
  mounted() {
    console.log('userInfo', this.userInfo)
    this.orgId = this.spInfo.deptId
    tenGetCollectionPublicInfo({ orgId: this.orgId }).then(res => {
      this.publicAcount = res.data
    })
  },
  methods: {
    payMoney() {
      // 打款
      this.$refs['form'].validate(valid => {
        if (valid) {
          // if (!this.amount) {
          //   this.$message.error('请输入支付金额')
          //   return
          // } else if (this.amount * 1 <= 0 || this.amount * 1 > 9999999) {
          //   this.$message.error('支付金额范围1-9999999')
          //   return
          // }
          console.log('this.amount', this.amount)
          this.step = 2
        }
      })
    },
    submit() {
      // if (!this.fileList.length || this.fileList.length != 3) {
      //   this.$message.error('请上传三张打款凭证')
      //   return
      // }
      const fileArr = this.fileList.map(file => {
        const { baseUrl, path } = file.response.data
        return baseUrl + path
      })
      commitRecharge({
        'accountBankName': this.publicAcount.bankName,
        'accountBranchBank': this.publicAcount.branchBankName,
        'accountName': this.publicAcount.bankCardName,
        'accountNo': this.publicAcount.bankCardNo,
        'atta1': fileArr[0] || '',
        'atta2': fileArr[1] || '',
        'atta3': fileArr[2] || '',
        'discount': this.discountInfo.discount,
        'flowBalance': this.discountInfo.balance,
        'ordAmt': this.amount,
        'tenantId': this.spInfo.syncTmpServicerId,
        'tenantName': this.userInfo.username
      }).then(res => {
        this.$message.success('操作成功！')
        this.$emit('sucClose')
      })
    },
    // 上传图片前
    uploadImgBefore(file) {
      if (this.fileList.length < 3) {
        return this.$uploadImgBefore({ file, maxSizes: 0.5, fileType: ['JPG', 'PNG'] })
      } else {
        this.$message.error('最多只能上传3张打款凭证')
        return false
      }
    },

    // 上传图片中
    uploadImgProgress() {
      this.loading = true
    },

    // 上传图片错误
    uploadImgError() {
      this.loading = false
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
      this.fileList = fileList
    },
    // 上传图片成功
    uploadImgSuccess(res, file, fileList) {
      this.loading = false
      console.log('res', file, fileList)
      if (res.code === 0) {
        // this.fileList.push(res.data.baseUrl + res.data.path)
        this.fileList = fileList
      } else {
        this.$message.error(res.code + ':' + res.msg)
      }
    },
    // 复制剪切板
    handleCopyClipboard(event) {
      const text = `银行：${this.publicAcount.bankName},支行：${this.publicAcount.branchBankName},卡号：${this.publicAcount.bankCardNo},公司名称：${this.publicAcount.bankCardName}`
      clip(text, event)
    },
    amountValid(rule, value, callback) {
      console.log(rule, value)
      // 获取机构折扣信息和可获流量
      if (this.amount) {
        if (this.amount * 1 <= 0 || this.amount * 1 > 9999999) {
          callback('支付金额范围1-9999999')
        } else {
          tenGetTenantDiscount({
            amount: this.amount,
            orgId: this.orgId
          }).then(res => {
            this.discountInfo = res.data
            callback()
          }).catch(res => {
            callback(res.msg)
          })
        }
      } else {
        this.discountInfo = {}
        callback('请输入支付金额')
      }
    }
  }

}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.infoConfig{
  padding: 20px;
}
.money{
  color: #ffb72f;
}

.upload-box{
    display: flex;
    align-items: center;
  ::v-deep.el-upload-list__item {
    width: 100px;
    height: 100px;
  }
  ::v-deep.el-upload{
    border: none;
    .upload-img {
      width: 100px;
      height: 100px;
      margin-right: 20px;
    }

    .el-icon-plus {
      line-height: 100px;
      width: 100px;
      border: 1px dashed #d9d9d9;
    }
  }
}
</style>
